<!--
 * @Description: 
 * @Author: duan_shuangjun 丶
 * @Date: 2025-09-21 21:30:44
 * @LastEditTime: 2025-09-21 21:31:02
-->
<template>
  <div>
    <el-drawer v-model="isShowDrawer" :title="title" :size="size" :direction="direction">
      <div class="drawer-box">
        <slot></slot>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  showDrawer: boolean
  title?: string
  size?: string | number
  direction?: 'rtl' | 'ltr' | 'ttb' | 'btt'
}

interface Emits {
  (e: 'update:showDrawer', value: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  title: '抽屉组件标题',
  size: '30%',
  direction: 'rtl'
})

const emit = defineEmits<Emits>()

const isShowDrawer = computed({
  get: () => props.showDrawer,
  set: val => emit('update:showDrawer', val)
})
</script>

<style lang="scss" scoped>
.drawer-box {
  padding: 30px;
}
</style>
